<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>出境记录</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			body {
				background-color: #FFFFFF;
			}
			.mui-content {
				background-color: #FFFFFF;
			}
			.info-div {
				width: 100%;
				background-color: #FFFFFF;
			}
			.item-div {
				margin: 0px 28px;
				height: 55px;
				position: relative;
			}
			.item-span {
				line-height: 55px;
				font-family: 'PingFangSC-Regular';
				font-size: 14px;
				color: #666666;
			}
			.item-icon {
				width: 20px;
				height: 20px;
				position: absolute;
				right: 0px;
				top: 22px;
			}
			.line-div {
				width: 100%;
				height: 1px;
				float: right;
				background-color: #F3F3F3;
			}
			input[type=text] {
				padding: 0px;
			    float: right;
	    			width: 65%;
				margin-bottom: 0;
				height: 55px; 
				border-width: 0px;
				color:#515151;
				font-size: 15px;
				background-color: transparent;
			}
			::-webkit-input-placeholder{
			    font-family: 'PingFangSC-Regular';
				font-size: 14px;
				color: #999999;
			}
			.right-div-container {
				display: inline-block;
				float: right;
				width: 65%;
			}
			.right-div {
				display: inline-block;
				float: right;
			}
			.right-span {
				line-height: 55px;
				font-size: 14px;
				color: #999999;
			}
			.choose-img {
				width: 32px;
				height: 32px;
				margin-top: 8px;
			}
			.record-container {
				margin-top: 10px;
				width: 94%;
				margin-left: 3%;
				border: 1px solid #F3F3F3;
				border-radius: 4px;
			}
			.record-title-div {
				width: 100%;
				height: 50px;
				background-color: #FAFAFA;;
				font-family: 'PingFangSC-Medium';
				font-size: 16px;
				color: #333333;
				text-align: center;
				line-height: 50px;
			}
			#outboundRecord {
				display: none;
				margin-bottom: 50px;
			}
			#addRecordMenu, .outboundRecordsId-div {
				display: none;
			}
			.delete-div {
				text-align: center;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">出境记录</h1>
		</header>
		<div class="mui-content">
			<div class="info-div">
				<div id="isAbroaded" class="item-div">
					<span class="item-span">是否有出境记录</span>
					<div id="showIFPicker" class="right-div-container">
						<span class="right-span" id="isOutbound">否</span>
						<div class="right-div">
							<img class="choose-img" src="../img/detail/down_color_icon.png" />
						</div>
					</div>
				</div>
				<div class="line-div"></div>
			</div>
			<div id="addRecordMenu" class="info-div">
				<div id="addRecord" class="item-div">
					<span class="item-span">出境记录</span>
					<div class="right-div-container">
						<span class="right-span">注：可添加多段出境经历</span>
						<div class="right-div">
							<span class="right-span" style="color: #FF4747;">＋新增</span>
						</div>
					</div>
				</div>
				<div class="line-div"></div>
			</div>
			<div id="outboundRecord" class="info-div"></div>
			<div class="transaction-container"><button type="button">保存</button></div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/utils/regular.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.min.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.poppicker.js"></script>
	<script type="text/javascript" src="../js/thirdparty/city.data.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/city.data-3.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var customerId = base.getParameter("customerId");
		var applyCustomerId = base.getParameter("applyCustomerId");
		var outboundPicker = null;
		var _getParam = function(obj, param) {
			return obj[param] || '';
		};
		(function($, doc) {
			$.init();
			getVisaOutboundRecordsList();
			$.ready(function() {
				//普通示例
				outboundPicker = new $.PopPicker();
				outboundPicker.setData([{
					value: '0',
					text: '否'
				}, {
					value: '1',
					text: '是'
				}]);
				addrPicker = new $.PopPicker({
					layer: 3
				});
				addrPicker.setData(cityData3);
			});
			//学历
			var purposePicker = new $.PopPicker();
			purposePicker.setData([{
				value: '1',
				text: '旅游'
			}, {
				value: '2',
				text: '商务'
			}, {
				value: '3',
				text: '探亲'
			}, {
				value: '4',
				text: '访友'
			}, {
				value: '5',
				text: '学习'
			}]);
			$("#outboundRecord").on('tap', '.purposePicker', function(e){
				var _self = this;
				purposePicker.show(function(items) {
					jQuery(_self).find(".purposeResult").html(_getParam(items[0], "text"));
				});
			});
			$("#outboundRecord").on('tap', '.datePicker',function(e) {
				var _self = this;
				if(_self.picker) {
					_self.picker.show(function (rs) {
						jQuery(_self).find(".dateResult").html(rs.text);
						_self.picker.dispose();
						_self.picker = null;
					});
				} else {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					_self.picker = new $.DtPicker(options);
					_self.picker.show(function(rs) {
						jQuery(_self).find(".dateResult").html(rs.text);
						_self.picker.dispose();
						_self.picker = null;
					});
				}
			}, false);
		})(mui, document);
		$("#isAbroaded").on("tap", "#showIFPicker", function() {
			document.activeElement.blur();
			outboundPicker.show(function(items) {
				$("#isOutbound").html(_getParam(items[0], 'text'));
				if (_getParam(items[0], 'value') == 1) {
					$('#addRecordMenu').show();
					$('#outboundRecord').show();
					$('#outboundRecord').prepend(getRecordHtml());
				} else {
					$('#addRecordMenu').hide();
					$('#outboundRecord').hide();
				}
			});
		})
		$("#addRecord").on("tap", ".right-div", function() {
			document.activeElement.blur();
			$('#outboundRecord').prepend(getRecordHtml());
		})
		$("#outboundRecord").on("tap", ".delete-div", function () {
			var _outboundRecordsId = $(this).closest('.record-container').find(".outboundRecordsId-div").text();
			var _self = $(this);
			if (_outboundRecordsId) {
				base.postData(base.url.delVisaOutboundRecordsInfo,{outboundRecordsId: _outboundRecordsId},function(data) {
					mui.toast(data.message);
					if (data.success) {
						_self.closest(".record-container").remove();
						var itemLength = $("#outboundRecord").find(".record-title-div").length;
						$("#outboundRecord .record-title-div").each(function(i, e){
							_self.text("出境记录"+itemLength);
							itemLength--;
						});
					}
				});
			} else {
				_self.closest(".record-container").remove();
				var itemLength = $("#outboundRecord").find(".record-title-div").length;
				$("#outboundRecord .record-title-div").each(function(i, e){
					_self.text("出境记录"+itemLength);
					itemLength--;
				});
			}
		})
		function getRecordHtml() {
			var itemLength = $("#outboundRecord").find(".record-title-div").length+1;
			var html='<div class="record-container">'+
				'<div class="outboundRecordsId-div"></div>'+
				'<div class="record-title-div">出境记录'+itemLength+'</div>'+
				'<div class="item-div">'+
					'<span class="item-span">国家名称</span>'+
					'<input type="text" name="countryName" placeholder="请填写国家名称"/>'+
				'</div>'+
				'<div class="line-div"></div>'+
				'<div id="isUsedName" class="item-div">'+
					'<span class="item-span">出行目的</span>'+
					'<div class="right-div-container purposePicker">'+
						'<span class="right-span purposeResult">旅游</span>'+
						'<div class="right-div">'+
							'<img class="choose-img" src="../img/detail/down_color_icon.png" />'+
						'</div>'+
					'</div>'+
				'</div>'+
				'<div class="line-div"></div>'+
				'<div id="nowAddr" class="item-div">'+
					'<span class="item-span">入境时间</span>'+
					'<div data-options=\'{"type":"date","beginYear":1900}\' class="right-div-container datePicker">'+
						'<span class="right-span dateResult entryTime">请选择入境时间</span>'+
						'<div class="right-div">'+
							'<img class="choose-img" src="../img/detail/down_color_icon.png" />'+
						'</div>'+
					'</div>'+
				'</div>'+
				'<div class="line-div"></div>'+
				'<div id="nowAddr" class="item-div">'+
					'<span class="item-span">返回时间</span>'+
					'<div data-options=\'{"type":"date","beginYear":1900}\' class="right-div-container datePicker">'+
						'<span class="right-span dateResult returnTime">请选择返回时间</span>'+
						'<div class="right-div">'+
							'<img class="choose-img" src="../img/detail/down_color_icon.png" />'+
						'</div>'+
					'</div>'+
				'</div>'
				if (itemLength>1) {
					html+='<div class="line-div"></div>'
					html+='<div class="item-div delete-div">'
					html+='<span class="item-span" style="color: #FF4747;">删除</span>'
					html+='</div>'
				}
			'</div>'
			return html;
		}
		function getListItem(item, itemLength, index) {
			var html = '';
			html += '<div class="record-container">'
			html += 	'<div class="outboundRecordsId-div">'+item.outboundRecordsId+'</div>'
			html += 	'<div class="record-title-div">出境记录'+index+'</div>'
			html += 	'<div class="item-div">'
			html += 		'<span class="item-span">国家名称</span>'
			html += 		'<input type="text" name="countryName" value="'+item.countryName+'" placeholder="请填写国家名称"/>'
			html += 	'</div>'
			html += 	'<div class="line-div"></div>'
			html += 	'<div id="isUsedName" class="item-div">'
			html += 		'<span class="item-span">出行目的</span>'
			html += 		'<div class="right-div-container purposePicker">'
			html += 			'<span class="right-span purposeResult">'+getPurposeStr(item.purpose)+'</span>'
			html += 			'<div class="right-div">'
			html += 				'<img class="choose-img" src="../img/detail/down_color_icon.png" />'
			html += 			'</div>'
			html += 		'</div>'
			html += 	'</div>'
			html += 	'<div class="line-div"></div>'
			html += 	'<div id="nowAddr" class="item-div">'
			html += 		'<span class="item-span">入境时间</span>'
			html += 		'<div data-options=\'{"type":"date","beginYear":1900}\' class="right-div-container datePicker">'
			html += 			'<span class="right-span dateResult entryTime">'+item.entryTime+'</span>'
			html += 			'<div class="right-div">'
			html += 				'<img class="choose-img" src="../img/detail/down_color_icon.png" />'
			html += 			'</div>'
			html += 		'</div>'
			html += 	'</div>'
			html += 	'<div class="line-div"></div>'
			html += 	'<div id="nowAddr" class="item-div">'
			html += 		'<span class="item-span">返回时间</span>'
			html += 		'<div data-options=\'{"type":"date","beginYear":1900}\' class="right-div-container datePicker">'
			html += 			'<span class="right-span dateResult returnTime">'+item.returnTime+'</span>'
			html += 			'<div class="right-div">'
			html += 				'<img class="choose-img" src="../img/detail/down_color_icon.png" />'
			html += 			'</div>'
			html += 		'</div>'
			html += 	'</div>'
			if (itemLength>1) {
				html+='<div class="line-div"></div>'
				html+='<div class="item-div delete-div">'
				html+='<span class="item-span" style="color: #FF4747;">删除</span>'
				html+='</div>'
			}
			html += '</div>'
			return html;
		}
		function getVisaOutboundRecordsList() {
			base.setWait('正在获取数据');
			let url = base.url.getVisaOutboundRecordsList;
			var params = {
				customerId: customerId,
				applyCustomerId: applyCustomerId
			}
			base.postData(url, params, getVisaOutboundRecordsListSuccess)
		}
		function getVisaOutboundRecordsListSuccess(data) {
			if (data.success) {
				$("#isOutbound").text(getWhetherStr(data.extendData.isOutboundRecords));
				if (data.extendData.isOutboundRecords==1) {
					$('#outboundRecord').show();
					var list = data.extendData.outboundRecordsList||[];
					list.length && $('#addRecordMenu').show();
					var html = '';
					for (var index in list) {
						html+= getListItem(list[index], list.length, list.length-index);
					}
					$('#outboundRecord').prepend(html);
				}
			} else {
				mui.toast(data.message);
			}
		}
		$(".transaction-container").on("tap", "button", function() {
			var url = base.url.addVisaOutboundRecordsInfo;
			var outboundList = new Array();
			$("#outboundRecord").find(".record-container").each(function(index, item){
				var itemParams = {
					outboundRecordsId:$(this).find(".outboundRecordsId-div").text(),
					countryName:$(this).find("input[name='countryName']").val(),
					purpose:getPurposeValue($(this).find(".purposeResult").text()),
					entryTime:$(this).find(".entryTime").text(),
					returnTime:$(this).find(".returnTime").text()
				}
				outboundList.push(itemParams);
			});
			outboundList = JSON.stringify(outboundList);
			var params = {
				customerId: customerId,
				applyCustomerId: applyCustomerId,
				isOutboundRecords: getWhetherValue($("#isOutbound").text()),
				outboundRecordsParameter: getWhetherValue($("#isOutbound").text())==1?outboundList:""
			};
			console.log(params);
			base.postData(url,params,addVisaOutboundRecordsInfoSuccess);
		})
		function addVisaOutboundRecordsInfoSuccess(data) {
			mui.toast(data.message);
			if (data.success) {
				setTimeout(function() {
					mui.back();
				}, 1000);
			}
		}
	</script>
</html>